<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期联动菜单</title>
    <script>
        function loadDate(){
            // 当前年份
            let currentYear = new Date().getFullYear();
            // 加载年份
            let year = document.getElementById("year");
            for(let i = currentYear-10; i <= currentYear; i++){
                year[year.length] = new Option(i,i);
            }
            // 加载月份
            let month = document.getElementById("month");
            for(let i = 1; i<= 12; i++){
                month[month.length] = new Option(i,i);
            }
        }
        function loadDay(){
            // 获取当前已经选择的年份与月份
            let year = document.getElementById("year").value;
            let month = document.getElementById("month").value;
            // 当选择的年份或者月份是无效的,则不加载
            // 即当两者的服务器值有任意一个为-1时,表示无效
            if(year == -1 || month == -1){
                return;
            }
            // 如果两者均为有效,则加载天数
            let day = document.getElementById("day");
            // 先获取对应的年份与月份所拥有的天数
            let countDay = new Date(year,month,0).getDate();

            // 清除原有的天数,保留原始选项
            day.length = 1;

            // 开始加载天数
            for(let i = 1; i <= countDay; i++){
                day[day.length] = new Option(i,i);
            }
        }
    </script>
    <script>
    </script>
</head>
<body onload="loadDate()">
<!--
    所有数据均在js中加载
    加载需求:
        1.当页面加载之后,在年份与月份的下拉列中加载对应的数据
            年份为当前年份的前十年
            月份为1-12月
        2.当用户选择了有效的年份与月份之后
            加载出这一年这个月所拥有的日期
-->
<select id="year" onchange="loadDay()">
    <option value="-1">年</option>
</select>
<select id="month" onchange="loadDay()">
    <option value="-1">月</option>
</select>
<select id="day">
    <option value="-1">日</option>
</select>
</body>
</html>